<template>
  <div class="search">
    <f-form ref="form" :action="api.inteActivity" :form-key="this.formItem.activityId" :file-ids="fileIds">
      <f-form-item label="所属分类" name="typeId" :required="true" type="select" :data="api.type.list" :value="formItem.typeId" label-key="typeName" value-key="typeId"/>
      <f-form-item label="标题" name="activityTitle" :required="true" :value="formItem.activityTitle"/>
      <f-form-item label="活动标签" type="tag" name="activityTag" :value="formItem.activityTag"></f-form-item>
      <f-form-item label="所属区域" type="areaSelect" name="areaIds" :required="true"  :value="areaIds" :level="2" v-if="loaded"></f-form-item>

      <f-form-item label="坐标" tooltip="点击图标弹出地图中点击拾取位置坐标" type="point" :required="true" name="point" :marker="[formItem.lon,formItem.lat]" :lat.sync="formItem.lat" :lon.sync="formItem.lon" :value.sync="formItem.lon+','+formItem.lat" @change="pointChange" :zoom="15" :showSearchAreaNum="3"></f-form-item>
      <f-form-item label="地址" name="activityAddress" :required="true" :value="formItem.activityAddress"/>
      <f-form-item label="活动电话" name="activityMobile" :required="true" :value="formItem.activityMobile"/>
      <f-form-item label="活动图片" type="upload" name="coverImage" :value="formItem.sliderImageList" :file-max="5" @uploadSuccess="uploadSuccess"/>
      <f-form-item label="内容" name="activityContent" type="editor" :value="formItem.activityContent"/>
    </f-form>
  </div>
</template>

<script>


  export default {
    name: 'inteActivityForm',
    props: {},
    data() {
      return {
        isAdd: true,//是否是添加模式
        loaded: false,//是否加载完成
        fileIds: [],//上传文件ID
        removeIds: [],
        formItem: this.getFormItem(),
        selectData: [],
        areaIds: [],
        markers: [[121.4871, 31.2491], [121.4873, 31.2493]],
        markerIcon: ''
      }
    },
    methods: {
      getFormItem() {
        return {
          activityId: '',
          typeId: '',
          activityTitle: '',
          activityTag: '',
          activityAddress: '',
          coverImage: '',
          activityContent: '',
          proId: '',
          cityId: '',
          areaId: '',
          activityMobile: '',
          sliderImageList: [],
          lat: '0.0',
          lon: '0.0',
          areaName: '',
          viewCount: 0,
          activityState: 0,
          recommend: 0
        }
      },
      //表单赋值
      setData(data) {
        this.$refs.form.resetFields()
        this.formItem = this.getFormItem()
        this.isAdd = true
        if (data && data.activityId) {
          this.$refs.form.getDetails({ activityId: data.activityId }, (data) => {
            this.formItem = data
            console.log("activityTag",this.formItem.activityTag)
            this.areaIds = [this.formItem.proId, this.formItem.cityId, this.formItem.areaId]
            this.loaded = true
          })
          this.isAdd = false
        } else {
          this.loaded = true
        }
      },
      //文件上传回调
      uploadSuccess(fileUrl, files, fileIds, removeIds) {
        this.fileIds = fileIds
        this.formItem.coverImage = fileUrl
        this.removeIds.push(...removeIds)
      },
      pointChange(position) {
        console.log(position)
        this.formItem.activityAddress = position.address
        this.formItem.lat = String(position.lat)
        this.formItem.lon = String(position.lng)
      },
      //提交表单
      handleSubmit(callback) {
        let params = {
          id: this.formItem.activityId,
          removeIds: this.removeIds.join(','),
          fileIds: this.fileIds.join(',')
        }
        let postParams = Object.assign({}, params, this.formItem)
        this.$refs.form.handlerSubmit(postParams, callback)
      }
    },
    created() {

    },
    components: {}
  }
</script>

<style scoped lang="less" rel="stylesheet/less">

</style>
